
<template>
  <div>
      <div v-if="showselect" @dblclick="sqlsingledblclk">
          <el-select :placeholder="mydataLabel" :style="{width: width}" clearable filterable @change="changevt" :disabled="optionflag == 0" :remote-method="filterMethodSqlSingle" ref="ddlSqlSingleSelect" v-model="value">
              <el-option v-for="(item,index) in options" :key="index" :label="item.display" :value="item.data">
                  <span style="float: left">{{ item.display }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{ item.data }}</span>
              </el-option>
          </el-select>
      </div>
      <div v-else>
          <el-select v-model="TableRowValue" filterable remote :remote-method="filterMethodSqlSingle" placeholder="请选择" style="width:100%" clearable @clear="TableClear">
              <el-option :value="TableRowValue" :label="TableRowValue" style="padding:0;height:auto;width:100%;">
                  <div>
                      <el-table :data="options" style="width: 100%" @row-click="RowClick" highlight-current-row>
                          <el-table-column prop="data" label="代码" width="180"></el-table-column>
                          <el-table-column prop="display" label="名称" width="180"></el-table-column>
                          <el-table-column prop="inputcode" label="输入码"></el-table-column>
                      </el-table>
                  </div>
              </el-option>
          </el-select>
      </div>

      <el-dialog :append-to-body="true" top="40px" :close-on-click-modal="false" :title="mydataLabel" :visible.sync="dialogvisible" width="600px">
          <div style="height:450px">
              <rm-layout-top splitcolor="white" :splitwidth=5 :fixsize=40>
                  <template v-slot:fix>
                      <div style="height:40px;border:1px solid #CCC">
                          <table>
                              <tr>
                                  <td>快速检索</td>
                                  <td>
                                      <el-input placeholder="快速检索" prefix-icon="el-icon-search" ref="reftxtsearch" style="width:300px;" v-model="txtsearch"></el-input>
                                  </td>
                                  <td>
                                      <el-button @click="btnok" icon="el-icon-circle-check" style="margin-left:10px;margin-top:3px;">确定</el-button>
                                  </td>
                                  <td>
                                      <el-button @click="dialogvisible = false" style="margin-top:3px;" icon="el-icon-circle-close">取消</el-button>
                                  </td>
                              </tr>
                          </table>
                      </div>
                  </template>
                  <div style="height:100%;width:100%;background-color:#ddccbb;">
                      <vxe-table :data.sync="list" :select-config="selectConfig" :sort-config="{trigger: 'cell'}" :edit-config="{trigger: 'click',mode: 'cell',showStatus: true,showIcon: false,}" border fit height="auto" header-align="center" highlight-current-row highlight-hover-row highlight-hover-column ref="pxTable" resizable size="mini" stripe show-header-overflow="tooltip" show-overflow="tooltip" @cell-dblclick="btnok">
                          <vxe-table-column type="index" title="NO." width="50" align="center" sortable></vxe-table-column>
                          <vxe-table-column field="data" title="代码" width="90" sortable></vxe-table-column>
                          <vxe-table-column field="display" title="名称" width="250" sortable></vxe-table-column>
                          <vxe-table-column field="inputcode" title="录入码" width="160" sortable></vxe-table-column>
                      </vxe-table>
                  </div>
              </rm-layout-top>
          </div>
      </el-dialog>
  </div>
</template>
<script>
export default {
  //key ①记录下拉表格返回的值②用于LIS选项中作为过滤参数
  props: { width: { type: String }, value: { type: String }, sql: { type: String }, optionflag: { type: String }, showselect: { type: Boolean, default: true }, keyid: { type: [String, Number] } },
  data() {
      return {
          mydataLabel: "请选择",
          SqlSingleoptions: [],
          options: [],
          TableRowValue: "",
          myvalue: this.value,
          dialogvisible: false,
          tableData: [],
          selectConfig: { tigger: "row" },
          txtsearch: "",
      };
  },
  computed: {},
  updated() {
      if (!this.showselect) {
          //是下拉表格
          let data = this.SqlSingleoptions.find((item) => item.data == this.myvalue);
          if (!!data) {
              this.TableRowValue = data.display;
          } else {
              this.TableRowValue = this.myvalue;
          }
      }
  },
  created() {
      this.loadAllData(); //初始化主列表
  },
  watch: {},
  mounted() {},
  computed: {
      list() {
          let filterName = this.txtsearch;
          if (filterName) {
              let rest = this.tableData.filter((item) => {
                  return item.data.toUpperCase().indexOf(filterName.toUpperCase()) > -1 || item.display.toUpperCase().indexOf(filterName.toUpperCase()) > -1 || (item.inputcode ? item.inputcode.toUpperCase().indexOf(filterName.toUpperCase()) > -1 : false);
              });
              return rest;
          } else {
              return this.tableData;
          }
      },
  },
  methods: {
      loadAllData: function () {
          this.$tool
              .request({
                  //url: "MNG/MNG1/MNG132",
                  url: "ucent/ddl",
                  method: "post",
                  data: {
                      action: "SqlSingleSelect",
                      sql: this.sql,
                      keyid: this.keyid,
                  },
              })
              .then((res) => {
                  this.SqlSingleoptions = res;
                  this.options = res;
              })
              .catch((e) => {
                  console.log("error", e);
              });
      },
      changevt: function (evt) {
          //this.value = evt;
          this.$emit("change", evt);
      },
      filterMethodSqlSingle(query) {
          if (query) {
              //val存在
              this.options = this.SqlSingleoptions.filter((item) => {
                  if (item.hasOwnProperty("inputcode")) {
                      if (!!~item.data.indexOf(query) || !!~item.display.indexOf(query) || (item.inputcode ? !!~item.inputcode.toUpperCase().indexOf(query.toUpperCase()) : false)) {
                          return true;
                      }
                  } else {
                      if (!!~item.data.indexOf(query) || !!~item.display.indexOf(query)) {
                          return true;
                      }
                  }
              });
          } else {
              //val为空时，还原数组
              this.options = this.SqlSingleoptions;
          }
      },
      RowClick(row, column, event) {
          this.TableRowValue = row.display;
          this.myvalue = row.data;
          this.$emit("change", row.data, this.keyid);
      },
      TableClear() {
          this.myvalue = "";
          this.$emit("change", "", this.keyid);
      },
      sqlsingledblclk() {
          this.$refs.ddlSqlSingleSelect.blur();
          this.dialogvisible = true;
          this.txtsearch = "";
          let data = this.SqlSingleoptions.filter((m) => !!m.data);
          this.tableData = data;
          if (this.$refs.reftxtsearch) {
              setTimeout(() => {
                  this.$refs.reftxtsearch.focus();
              }, 10);
          }
      },
      btnok() {
          let getvalue = this.$refs.pxTable.getCurrentRow().data;
          if (getvalue) {
              this.dialogvisible = false;
              this.$nextTick(() => {
                  this.$emit("change", getvalue);
              });
          }
      },
  },
};
</script>
<style scoped>
.el-main {
  padding: 0;
}
</style>
